import eventBus from "@/typings/GxEventBus";
import { IFilter } from "@/typings/IFilter";
import { Button, Col, Input, message, Row, Select } from "antd";
import { ChangeEvent, FC, ReactElement, useState } from "react";

const { Option } = Select;

interface ITaskInputProps {
  filter:IFilter,
  queryTasks: () => void;
}

const TaskInput: FC<ITaskInputProps> = ({
   queryTasks ,filter
  }): ReactElement => {

  /** 点击创建按钮时，发布一个事件，设置任务模态框的visible值为true，即显示 */
  const changeVisible = () => {
    eventBus.publish("setVisible", true);
  };

  /** 任务状态下拉框选择事件 */
  const handleChange = (value: { value: string; label: React.ReactNode }) => {
    switch (value.value) {
      case "1":
        // 移除filter的completed属性
        delete filter.completed
        eventBus.publish("setFilter", filter);
        break;
      case "2":
        eventBus.publish("setFilter",Object.assign(filter, { completed: 1 }))
        break;
      case "3":
        eventBus.publish("setFilter",Object.assign(filter, { completed: 0 }))
        break;
      default:
        break;
    }
  };

  const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    eventBus.publish("setFilter",(Object.assign(filter, { name: e.currentTarget.value })));
  };

  const searchTasks = () => {
    if (filter.name === "") {
      delete filter.name 
      eventBus.publish("setFilter",filter)
    }
    queryTasks();
  };

  return (
    <div className="task-input">
      <Row>
        <Col span={4} className="col-lable">
          任务名称：
        </Col>
        <Col span={4}>
          <Input onChange={onInputChange} placeholder="请输入待办项名称" />
        </Col>
        <Col span={4} className="col-lable">
          完成状态：
        </Col>
        <Col span={4}>
          <Select
            labelInValue
            style={{ width: 200, height: "40px" }}
            placeholder="请选择任务状态"
            onChange={handleChange}
          >
            <Option value="1">所有</Option>
            <Option value="2">已完成</Option>
            <Option value="3">未完成</Option>
          </Select>
        </Col>
        <Col span={2} className="col-btn">
          <Button onClick={searchTasks} className="col-btn-hover" type="primary">
            查询
          </Button>
        </Col>
        <Col span={6} className="col-btn">
          <Button
            className="col-btn-hover"
            type="primary"
            onClick={changeVisible}
          >
            添加
          </Button>
        </Col>
      </Row>
    </div>
  );
};

export default TaskInput;
